<script setup lang="ts">
import type { BlockState } from '~/types'
import { isDev } from '~/composables'
defineProps<{ block: BlockState }>()

const emit = defineEmits<{
  (e: 'lrclick', event: MouseEvent): void
}>()

function whichButtons(event: MouseEvent) {
  if (event.buttons === 3)
    emit('lrclick', event)
}

const numberColors = [ // 数组颜色
  'text-transparent',
  'text-blue-500',
  'text-green-500',
  'text-yellow-500',
  'text-orange-500',
  'text-red-500',
  'text-purple-500',
  'text-pink-500',
  'text-teal-500',
]

// 不同格子的样式
const getBlockClass = (block: BlockState) => {
  if (block.flagged)
    return 'bg-gray-500/10'

  if (!block.revealed)
    return 'bg-gray-500/10 hover:bg-gray-500/20'

  return block.mine ? 'bg-red-500/100' : numberColors[block.adjacentMines]
}
</script>

<template>
  <button
    flex="~"
    items-center justify-center
    min-w-8 min-h-8 m="1px"
    border="0.5 gray-400/10"
    :class="getBlockClass(block)"
    @mousedown="whichButtons"
  >
    <template v-if="block.flagged">
      <div i-mdi-flag text-red />
    </template>
    <template v-else-if="block.revealed || isDev">
      <div v-if="block.mine" i-mdi-mine />
      <div v-else font-600>
        {{ block.adjacentMines }}
      </div>
    </template>
  </button>
</template>
